<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API接口检测测试页面</title>
    <script src="api_demo.js"></script>
    <script>
        // 各种API接口定义
        const API_CONFIG = {
            baseURL: "https://api.example.com/v1",
            endpoints: {
                users: "/api/v1/users",
                auth: "/api/auth/login",
                upload: "/api/v2/upload",
                graphql: "/graphql",
                rest: "/rest/v1/data"
            }
        };

        // 使用fetch的API调用
        async function fetchUsers() {
            const response = await fetch('/api/v1/users', {
                method: 'GET',
                headers: {
                    'Authorization': 'Bearer token123'
                }
            });
            return response.json();
        }

        // 使用axios的API调用
        function uploadFile(file) {
            return axios.post('/api/v2/upload', {
                file: file,
                path: '/user_uploads/'
            });
        }

        // 传统AJAX调用
        function loginUser(username, password) {
            $.ajax({
                url: '/api/auth/login',
                method: 'POST',
                data: {
                    username: username,
                    password: password
                }
            });
        }

        // GraphQL查询
        const query = `
            query GetUser($id: ID!) {
                user(id: $id) {
                    name
                    email
                }
            }
        `;

        fetch('/graphql', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                query: query,
                variables: { id: '123' }
            })
        });

        // 内联API配置
        var apiSettings = {
            endpoint: "https://internal-api.company.com/v3/data",
            wsEndpoint: "ws://192.168.1.100:8080/ws",
            uploadEndpoint: "http://10.0.0.50:9000/upload"
        };
    </script>
</head>
<body>
    <h1>API接口检测测试</h1>
    
    <div id="app">
        <!-- Vue.js API调用 -->
        <button onclick="testAPI()">测试API</button>
    </div>

    <script>
        // 更多API接口
        const endpoints = {
            GET: [
                '/api/v1/users',
                '/api/v1/posts',
                '/rest/v1/comments',
                '/graphql?query={users{id,name}}'
            ],
            POST: [
                '/api/v1/users/create',
                '/api/auth/register',
                '/api/v2/files/upload'
            ],
            PUT: [
                '/api/v1/users/update',
                '/rest/v1/posts/123'
            ],
            DELETE: [
                '/api/v1/users/123',
                '/api/v1/posts/456'
            ]
        };

        // 测试函数
        function testAPI() {
            // 使用不同方式调用API
            fetch(endpoints.GET[0])
                .then(response => response.json())
                .then(data => console.log(data));

            axios.get(endpoints.GET[1])
                .then(response => console.log(response.data));

            // 动态API路径
            const userId = 123;
            fetch(`/api/v1/users/${userId}/profile`)
                .then(response => response.json());
        }

        // WebSocket连接
        const ws = new WebSocket('ws://localhost:8080/api/ws');
        ws.onopen = function() {
            ws.send(JSON.stringify({ type: 'subscribe', channel: 'updates' }));
        };
    </script>
</body>
</html>
